<template>
  <div>
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    />
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      header-row-class-name="table-header"
      class="doumee-element-table doumee-element-tableb"
    >
      <el-table-column
        align="center"
        :label="$t('message.yqhpq')"
        prop="name"
        min-width="200"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span class="ckxqBtn" @click="handleDetail(scope.row)">{{
            scope.row.name
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.hdxm')"
        prop="projectName"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.hddd')"
        prop="siteName"
        min-width="160"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.bmfy')"
        prop="price"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.rssx')"
        prop="numInfo"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.ybmrs')"
        prop="joinNum"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.bmjzsj')"
        min-width="160"
        prop="endTime"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.hdsj')"
        min-width="200"
        prop="acTime"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.sort')"
        min-width="100"
        prop="sortNum"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.createTime')"
        min-width="160"
        prop="createTime"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="$t('message.status')"
        min-width="100"
        show-overflow-tooltip
        fixed="right"
      >
        <template slot-scope="scope">
          <span>{{ statusMap[scope.row.state] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('message.caozuo')"
        min-width="270"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button
              v-if="
                scope.row.state == '0'
              "
              v-preventReClick
              type="text"
              @click="editBtn(scope.row)"
            >{{ $t('message.edit') }}
            </el-button>
            <el-button
              v-if="scope.row.state == '0'"
              v-preventReClick
              type="text"
              @click="fbBtn(scope.row)"
            >{{ $t('message.fb') }}
            </el-button>
            <el-button
              v-if="scope.row.state == '0'"
              v-preventReClick
              type="text"
              class="secondColor"
              @click="deletelBtn(scope.row)"
            >{{ $t('message.del') }}</el-button>
            <el-button
              v-if="scope.row.state == '1'"
              v-preventReClick
              type="text"
              @click="reserveShow(scope.row)"
            >{{ $t('message.baomin') }}
            </el-button>
            <el-button
              v-if="scope.row.state == '1'"
              v-preventReClick
              type="text"
              @click="delayShow(scope.row)"
            >{{ $t('message.xgbmjzsj') }}
            </el-button>
            <el-button
              v-if="scope.row.state == '1'"
              v-preventReClick
              type="text"
              class="secondColor"
              @click="qxBtn(scope.row)"
            >{{ $t('message.qxhd') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
    <el-dialog
      :title="$t('message.xgbmjzsj')"
      :visible.sync="showDelay"
      width="400px"
      top="25vh !important"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
    >
      <el-form ref="ruleForm" :model="form" :rules="rules" label-suffix="：">
        <el-form-item :label="$t('message.bmjzsj')" prop="date">
          <el-date-picker
            v-model="form.date"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :placeholder="$t('message.xzrq')"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDelay">{{ $t('message.qx') }}</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="clickDelay('ruleForm')"
        >{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
    <Reservation ref="reservationTc" @yqSccess="getList()" />
    <Detail ref="DetailRef" />
    <Application ref="ApplicationRef" @paymentShow="paymentShowBtn" />
    <orderDialog ref="child" @orderSuccess="getList()" />
  </div>
</template>

<script>
import { getJointSiteList, getProjectList, releaseJointSite, deletedJointSite, cancelJointSite, editJointSiteEndTime, getJointSiteDetial } from '@/api'
import store from '@/store'
import { parseTime } from '@/utils/index'
import QueryForm from '@/components/QueryForm'
import Reservation from '../SpellSites/components/reservation.vue' // 约球
import Detail from './detail.vue'
import Application from './application.vue'
import orderDialog from '@/components/order'
export default {
  name: 'GetJointSiteList',
  components: {
    QueryForm,
    Reservation,
    Application,
    orderDialog,
    Detail
  },
  data() {
    return {
      queryFormConfig: {
        formItems: [{
          filed: 'name',
          type: 'input',
          label: this.$t('message.yqpcmc'),
          clearable: true
        }, {
          filed: 'projectId',
          type: 'select',
          label: this.$t('message.hdxm'),
          clearable: true,
          options: []
        }, {
          filed: 'state',
          type: 'select',
          label: this.$t('message.status'),
          placeholder: this.$t('message.qxz') + this.$t('message.ddzt'),
          clearable: true,
          options: [
            { value: '0', label: this.$t('message.dfb') },
            { value: '1', label: this.$t('message.bmz') },
            { value: '2', label: this.$t('message.bmyjz') },
            { value: '3', label: this.$t('message.jxz') },
            { value: '4', label: this.$t('message.yjs') },
            { value: '5', label: this.$t('message.yqx') }
          ]
        }],
        online: true
      },
      statusMap: {
        0: this.$t('message.dfb'),
        1: this.$t('message.bmz'),
        2: this.$t('message.bmyjz'),
        3: this.$t('message.jxz'),
        4: this.$t('message.yjs'),
        5: this.$t('message.yqx')
      },
      totalCount: 0,
      modalDialog: store.getters.dialog,
      list: [],
      meta: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      filters: {},
      listLoading: true,
      showDelay: false,
      form: {},
      id: '',
      rules: {
        date: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.rq'), trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.toGetProjectList()
    this.getList(1)
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    // 预定
    reserveShow(row) {
      this.$refs.ApplicationRef.open(row)
    },
    paymentShowBtn(e) {
      this.getList()
      console.log(1321, e)
      this.$refs.child.continuePay(e, 'assemblyField')
    },
    handleDetail(row) {
      this.$refs.DetailRef.getDetail(row.id)
    },
    toGetProjectList() {
      const venueId = sessionStorage.getItem('venueId')
      getProjectList({ param: { venueId, status: '1', type: '0' }}).then(
        (res) => {
          if (res.errorCode === '000000') {
            if (res.recordList && res.recordList.length > 0 && res.recordList[0].id) {
              const arr = res.recordList
              arr.forEach(e => {
                e.label = e.projectName
                e.value = e.id
              })
              this.queryFormConfig.formItems[1].options = arr
            }
          }
        }
      )
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    editBtn(e) {
      getJointSiteDetial({
        param: {
          id: e.id
        }
      }).then((res) => {
        if (res.errorCode === '000000') {
          this.$refs.reservationTc.open(
            {
              sites: res.record.sites,
              form: res.record,
              price: res.record.price,
              projectId: res.record.projectId
            }
          )
        }
      })
    },
    clearList() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      getJointSiteList({ pagination, param: { venueId, ...filters }}).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList
          this.totalCount = res.totalCount
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    delayShow(cnt) {
      this.showDelay = true
      this.id = cnt.id
      this.form = {}
    },
    cancelDelay() {
      this.showDelay = false
    },
    clickDelay(formName) {
      const { form, id } = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          editJointSiteEndTime({ param: { endTime: form.date, id }}).then(res => {
            if (res.errorCode === '000000') {
              this.$message.success(this.$t('message.xgbmjzsjcg'))
              this.showDelay = false
              this.getList()
            }
          }).catch((err) => {
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    fbBtn(e) {
      const that = this
      this.$confirm(this.$t('message.fbyqpctc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => { },
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          releaseJointSite({ param: { id: e.id }}).then(res => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success(this.$t('message.fbcg'))
              that.getList()
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => { })
    },
    qxBtn(e) {
      const that = this
      this.$confirm(this.$t('message.qxhdtc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => { },
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          cancelJointSite({ param: { id: e.id }}).then(res => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success(this.$t('message.qxcg'))
              that.getList()
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => { })
    },
    deletelBtn(e) {
      const that = this
      this.$confirm(this.$t('message.scyqpctc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning',
        callback: () => { },
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          deletedJointSite({ param: { id: e.id }}).then(res => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success(this.$t('message.delcg'))
              that.getList()
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => { })
    }
  }
}
</script>
